<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API连接测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .status { padding: 20px; margin: 10px 0; border-radius: 5px; }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .warning { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
        button:hover { background: #0056b3; }
        pre { background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto; }
        .loading { color: #666; }
    </style>
</head>
<body>
    <h1>🔧 API连接测试工具</h1>
    
    <div id="status" class="status warning">
        <strong>🔄 正在检测API状态...</strong>
    </div>

    <div style="margin: 20px 0;">
        <button onclick="testHealth()">测试健康检查</button>
        <button onclick="testCustomers()">测试客户API</button>
        <button onclick="createTestCustomer()">创建测试客户</button>
        <button onclick="clearResults()">清空结果</button>
    </div>

    <div id="results"></div>

    <script>
        const API_BASE_URL = 'http://localhost:3001/api';
        
        // 页面加载时自动检测
        window.onload = function() {
            autoDetect();
        };

        async function autoDetect() {
            await testHealth();
        }

        async function testHealth() {
            addResult('🔄 正在测试健康检查接口...', 'loading');
            
            try {
                const response = await fetch(`http://localhost:3001/health`);
                
                if (response.ok) {
                    const data = await response.json();
                    updateStatus('success', '✅ API服务正常运行');
                    addResult('✅ 健康检查成功', 'success');
                    addResult(`响应数据: ${JSON.stringify(data, null, 2)}`, 'pre');
                } else {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
            } catch (error) {
                updateStatus('error', '❌ API服务连接失败');
                addResult(`❌ 健康检查失败: ${error.message}`, 'error');
                addResult('请确保后端服务正在运行在端口3001', 'warning');
            }
        }

        async function testCustomers() {
            addResult('🔄 正在测试客户API...', 'loading');
            
            try {
                const response = await fetch(`${API_BASE_URL}/customers`);
                
                if (response.ok) {
                    const data = await response.json();
                    addResult('✅ 客户API调用成功', 'success');
                    addResult(`客户数量: ${data.data ? data.data.length : 0}`, 'info');
                    addResult(`响应数据: ${JSON.stringify(data, null, 2)}`, 'pre');
                } else {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
            } catch (error) {
                addResult(`❌ 客户API调用失败: ${error.message}`, 'error');
            }
        }

        async function createTestCustomer() {
            addResult('🔄 正在创建测试客户...', 'loading');
            
            const testCustomer = {
                customerCode: `TEST${Date.now()}`,
                name: '测试客户公司',
                contactPerson: '张测试',
                phone: '13800138000',
                address: '北京市朝阳区测试街道123号',
                region: '临沂'
            };

            try {
                const response = await fetch(`${API_BASE_URL}/customers`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(testCustomer)
                });

                if (response.ok) {
                    const data = await response.json();
                    addResult('✅ 测试客户创建成功', 'success');
                    addResult(`新客户ID: ${data.data.id}`, 'info');
                    addResult(`响应数据: ${JSON.stringify(data, null, 2)}`, 'pre');
                } else {
                    const errorData = await response.json();
                    throw new Error(errorData.message || `HTTP ${response.status}`);
                }
            } catch (error) {
                addResult(`❌ 创建测试客户失败: ${error.message}`, 'error');
            }
        }

        function updateStatus(type, message) {
            const statusEl = document.getElementById('status');
            statusEl.className = `status ${type}`;
            statusEl.innerHTML = `<strong>${message}</strong>`;
        }

        function addResult(message, type = 'info') {
            const resultsEl = document.getElementById('results');
            const div = document.createElement('div');
            
            if (type === 'pre') {
                div.innerHTML = `<pre>${message}</pre>`;
            } else {
                div.className = `status ${type}`;
                div.innerHTML = message;
            }
            
            resultsEl.appendChild(div);
            resultsEl.scrollTop = resultsEl.scrollHeight;
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }
    </script>
</body>
</html> 